<!-- EngineeringSwiperNode -->
<template>
  <div class="EngineeringSwiperNode">
    <div class="contentNode">
      <div class="swiper_box">
        <img
          src="./../../../../../public/img/eenginering/engineering1.png"
          class="engineeringImg"
        />
        <swiper
          :options="swiperOption"
          ref="mySwiper"
          class="swiper_container"
          @slideChange="slideChange()"
        >
          <!-- 数据部分 -->
          <swiper-slide
            class="swiper_slide"
            v-for="(item, index) of projectListNode"
            :key="index"
          >
            <router-link
              :to="{
                name: 'engineeringInfo',
                query: { currentIndex: 1, id: item.need_id },
              }"
            >
              <div class="listBox">
                <div class="listLeftNode">
                  <img
                    :src="
                      array[item.work_demand]
                        ? array[item.work_demand]
                        : defaultIcon
                    "
                    class="itemImg"
                  />
                  <div class="itemTitleName">{{ item.work_demand }}</div>
                </div>
                <div class="listColumn">
                  <div class="titleNode">{{ item.need_name }}</div>
                  <div class="listBg">
                    <img
                      src="./../../../../../public/img/eenginering/addressIcon.png"
                      class="addressIcon"
                    />
                    <span class="addressName">{{ item.area }}</span>
                  </div>
                  <div class="asking" v-if="item.need_detail.length > 0">
                    <div class="askingName">
                      求租：<span
                        v-for="(itemNeed_detail, i) of item.need_detail"
                        :key="i"
                        >{{ itemNeed_detail.type_name
                        }}{{ itemNeed_detail.number }}台{{
                          i == item.need_detail.length - 1 ? "" : ","
                        }}</span
                      >
                    </div>
                  </div>
                  <div class="infoBox">
                    <div class="timeBox">
                      <img
                        src="./../../../../../public/img/eenginering/timeIcon.png"
                        class="timeImg"
                      />
                      <span class="timeName">{{ item.create_time }}</span>
                    </div>
                    <div class="followBox">
                      <img
                        src="./../../../../../public/img/eenginering/followIcon.png"
                        class="followImg"
                      />
                      <span class="followName"
                        >关注度:<span class="followNum">{{
                          item.access_count
                        }}</span></span
                      >
                    </div>
                  </div>
                </div>
              </div>
            </router-link>
          </swiper-slide>
          <!-- <div
            class="swiper-pagination"
            slot="pagination">
            </div> -->
        </swiper>
        <div class="dinBtmcontip">
          <div class="leftarrow" @click="blackData">
            <img
              class="lefticon"
              src="../../../../assets/img/header/leftArrow2.png"
              alt=""
            />
          </div>
          <ul class="upli">
            <li
              :class="{
                upliset: upset == 0 ? true : false,
                uplis: upset != 0 ? true : false,
              }"
              @click="upliset(0)"
            >
              <span class="uplinow"></span>
            </li>
            <li
              :class="{
                upliset: upset == 3 ? true : false,
                uplis: upset != 3 ? true : false,
              }"
              @click="upliset(3)"
            >
              <span class="uplinow"></span>
            </li>
            <li
              :class="{
                upliset: upset == 6 ? true : false,
                uplis: upset != 6 ? true : false,
              }"
              @click="upliset(6)"
            >
              <span class="uplinow"></span>
            </li>
            <li
              :class="{
                upliset: upset == 9 ? true : false,
                uplis: upset != 9 ? true : false,
              }"
              @click="upliset(9)"
            >
              <span class="uplinow"></span>
            </li>
            <li
              :class="{
                upliset: upset == 12 ? true : false,
                uplis: upset != 12 ? true : false,
              }"
              @click="upliset(12)"
            >
              <span class="uplinow"></span>
            </li>
          </ul>
          <div class="rightarrow" @click="goData">
            <img
              class="righticon"
              src="../../../../assets/img/header/rightArrow2.png"
              alt=""
            />
          </div>
        </div>
      </div>
      <!-- 列表数据库 -->
      <div class="performanceBox">
        <img
          src="./../../../../../public/img/eenginering/engineering2.png"
          class="engineeringImg"
        />
        <div class="performanceList">
          <router-link
            class="listBoxTwo"
            :to="{
              name: 'engineeringInfo',
              query: { currentIndex: 1, id: items.need_id },
            }"
            v-for="(items, index) of listNode"
            :key="index"
          >
            <div class="listLeftNode">
              <img
                :src="
                  array[items.work_demand]
                    ? array[items.work_demand]
                    : defaultIcon
                "
                class="itemImg"
              />
              <div class="itemTitleName">{{ items.work_demand }}</div>
            </div>
            <div class="listColumn">
              <div class="titleNode">{{ items.need_name }}</div>
              <div class="listBg">
                <img
                  src="./../../../../../public/img/eenginering/addressIcon.png"
                  class="addressIcon"
                />
                <span class="addressName">{{ items.area }}</span>
              </div>
              <div class="askingT" v-if="items.need_detail.length > 0">
                <div class="askingName">
                  求租：<span
                    v-for="(itemNeed_detail, i) of items.need_detail"
                    :key="i"
                    >{{ itemNeed_detail.type_name
                    }}{{ itemNeed_detail.number }}台{{
                      i == items.need_detail.length - 1 ? "" : ","
                    }}</span
                  >
                </div>
              </div>
              <div class="speedBox">
                <div class="speedName">履约进度</div>
                <div class="speedStyle">
                  <!-- 判断数据加载完后在请求进度条数据 -->
                  <el-progress
                    :percentage="parseInt(items.amoney_cmoney_percent)"
                    :color="customColors"
                    :stroke-width="5"
                    class="speedStyle1"
                  >
                  </el-progress>
                </div>
              </div>
              <div class="infoBox">
                <div class="timeBox">
                  <img
                    src="./../../../../../public/img/eenginering/timeIcon.png"
                    class="timeImg"
                  />
                  <span class="timeName">{{ items.create_time }}</span>
                </div>
                <div class="followBox">
                  <img
                    src="./../../../../../public/img/eenginering/followIcon.png"
                    class="followImg"
                  />
                  <span class="followName"
                    >关注度:<span class="followNum">{{
                      items.access_count
                    }}</span></span
                  >
                </div>
              </div>
            </div>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script >
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
import { getNeedListproject, getShowneedlist } from "./../../../../apis/api.js";
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    // 这里存放数据
    return {
      upset: 0,
      userInfo: {},
      // 进度条颜色
      customColors: "#FF855B",
      projectListNode: [], //热门项目
      listNode: [], //精品求租
      array: {
        打桩: require("./../../../../../public/img/eenginering/dazhuang.png"),
        电力工程: require("./../../../../../public/img/eenginering/dazhuang.png"),
        吊装: require("./../../../../../public/img/eenginering/diaozhuang.png"),
        地铁工程: require("./../../../../../public/img/eenginering/ditiejianshe.png"),
        房屋建设: require("./../../../../../public/img/eenginering/fangwujianshe.png"),
        公路工程: require("./../../../../../public/img/eenginering/gonglujianshe.png"),
        机场建设: require("./../../../../../public/img/eenginering/jichangjianshe.png"),
        矿山: require("./../../../../../public/img/eenginering/kuangshan.png"),
        绿化: require("./../../../../../public/img/eenginering/lvhua.png"),
        平整: require("./../../../../../public/img/eenginering/pingzheng.png"),
        破碎: require("./../../../../../public/img/eenginering/posui.png"),
        市政建设: require("./../../../../../public/img/eenginering/shizhengjianshe.png"),
        水利工程: require("./../../../../../public/img/eenginering/shuiligongcheng.png"),
        水暖工程: require("./../../../../../public/img/eenginering/shuinuangongcheng.png"),
        隧道建设: require("./../../../../../public/img/eenginering/suidaojianshe.png"),
        土石方: require("./../../../../../public/img/eenginering/tushifang.png"),
      },
      defaultIcon: require("./../../../../../public/img/eenginering/defaultIcon.png"),
      swiperOption: {
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        // loop: true,
        // autoplay: true, //可设置数值来指定播放速度
        // speed: 800,  // 切换图片速度
        slidesPerView: 3, //一屏显示三张
        slidesPerGroup: 3, //一屏滚动
      },
    };
  },
  // 过滤器
  filters: {},
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    upliset(data) {
      this.upset = data;
      // this.fadeShow = false;
      this.$refs.mySwiper.$swiper.slideTo(data, 1000, false);
    },
    blackData() {
      this.$refs.mySwiper.$swiper.slidePrev();
    },
    goData() {
      this.$refs.mySwiper.$swiper.slideNext();
    },
    slideChange(e) {
      const activeIndex = this.$refs.mySwiper.$swiper.activeIndex;
      this.upset = activeIndex;
      // console.log(activeIndex);
    },
    // goInfo(id){
    //     this.$router.push({path:'/engineeringInfo',query:{currentIndex:1,id}})
    // },
    // goInfoData(id){
    //   this.$router.push({path:'/engineeringInfo',query:{currentIndex:1,id}})
    // },
    // 获取热门项目
    async getNeedListproject() {
      let res = await getNeedListproject();
      if (res.data.result == "1") {
        this.projectListNode = res.data.body.list;
        if (this.projectListNode.length > 15) {
          this.projectListNode = this.projectListNode.slice(0, 15);
        }
      }
    },
    // 精品履约中项目
    async getShowneedlist() {
      let res = await getShowneedlist();
      if (res.data.result == "1") {
        this.listNode = res.data.body.list;
      }
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getNeedListproject();
    this.getShowneedlist();
    this.userInfo = window.localStorage.getItem("userInfo");
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  ctivated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style scoped lang='scss'>

.dinBtmcontip {
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  .leftarrow {
    .lefticon {
      width: 40px;
      height: 17px;
      cursor: pointer;
    }
  }
  .upli {
    display: flex;
    align-items: center;
    .uplis {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 26px;
      height: 26px;
      margin-left: 20px;
      cursor: pointer;
      .uplinow {
        width: 6px;
        height: 6px;
        background: #303133;
        border-radius: 50%;
      }
    }
    .upliset {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 26px;
      height: 26px;
      border-radius: 50%;
      border: 1px solid #979797;
      margin-left: 20px;
      cursor: pointer;
      .uplinow {
        width: 6px;
        height: 6px;
        background: #303133;
        border-radius: 50%;
      }
    }
  }
  .rightarrow {
    margin-left: 20px;
    .righticon {
      width: 40px;
      height: 17px;
      cursor: pointer;
    }
  }
}
.askingName {
  width: 235px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: #999;
  margin-left: 10px;
}
.contentNode {
  margin: 67px auto 0 auto;
  padding-bottom: 100px;
  box-sizing: border-box;
}
.swiper_box {
  width: 1200px;
  margin: 0 auto;
}
.listBox {
  width: 373px;
  height: 260px;
  background: #ffffff;
  border: 1px solid #e7e7e7;
  margin-top: 50px;
  margin-left: 10px;
  display: flex;
  position: relative;
  cursor: pointer;
}
.listBoxTwo {
  width: 373px;
  height: 260px;
  background: #ffffff;
  border: 1px solid #e7e7e7;
  margin-top: 15px;
  display: flex;
  margin-left: 19px;
  position: relative;
  cursor: pointer;
}
.listLeftNode {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100px;
  height: 100%;
}
.itemImg {
  width: 43px;
  height: 43px;
  border-radius: 50px;
  margin-top: 32px;
}
.itemTitleName {
  font-size: 12px;
  color: 333;
  margin-top: 11px;
}
.listBg {
  display: flex;
  align-items: center;
  margin-top: 8px;
}
.listColumn {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
}
.asking {
  width: 230px;
  height: 15px;
  line-height: 15px;
  background: #f5f5f5;
  margin-top: 8px;
  border-radius: 2px;
  padding: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.askingT {
  width: 235px;
  height: 15px;
  line-height: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: #f5f5f5;
  margin-top: 8px;
  border-radius: 2px;
  padding: 10px;
}
.titleNode {
  font-size: 16px;
  color: 3333;
  font-weight: 500;
  max-width: 250px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.addressName {
  color: #999;
  font-size: 12px;
}

.infoBox {
  display: flex;
  align-items: center;
  position: absolute;
  right: 23px;
  bottom: 20px;
}
.timeBox {
  display: flex;
  align-items: center;
}
.followBox {
  display: flex;
  align-items: center;
  margin-left: 20px;
}
.timeImg {
  width: 22px;
  height: 22px;
}
.followImg {
  width: 22px;
  height: 22px;
}
.timeName {
  margin-left: 3px;
  font-size: 12px;
  color: #999;
}
.followName {
  margin-left: 3px;
  font-size: 12px;
  color: #999;
}
.followNum {
  margin-left: 3px;
}
.swiper_container {
  padding-bottom: 30px;
  box-sizing: border-box;
  position: relative;
}
.swiper-pagination {
  position: absolute;
  bottom: 0;
}
.performanceBox {
  max-width: 1200px;
  margin: 67px auto 0 auto;
}
.engineeringImg {
  width: 316px;
  height: 68px;
}
.performanceList {
  display: flex;
  flex-wrap: wrap;
}
.speedBox {
  display: flex;
  align-items: center;
  margin-top: 22px;
}
.speedName {
  font-size: 12px;
  color: #999;
}
.speedStyle {
  // width: 148px;
  margin-left: 10px;
  margin-top: -2px;
}
.speedStyle1 {
  width: 160px;
  display: flex;
  align-items: center;
}
a {
  color: #333;
}
</style>
